import { Router, Route, Switch, Redirect } from "react-router-dom"
import React from "react"
import Loading from "./components/Loading"
import history from "./utils/history"
import AuthRoute from "./components/AuthRoute"
const Login = React.lazy(() => import('./pages/Login'))

const Search = React.lazy(() => import('./pages/Search'))
const SearchResult = React.lazy(() => import('./pages/Search/Result'))
const ProfileEdit = React.lazy(() => import('./pages/Profile/Edit'))
const ProfileFeedback = React.lazy(() => import('./pages/Profile/Feedback'))
const Chat = React.lazy(() => import('./pages/Profile/Chat'))
const Article = React.lazy(() => import('./pages/Article'))


const Layout = React.lazy(() => import('./pages/Layout'))
const NotFound = React.lazy(() => import('./pages/NotFound'))

export default function App() {
  return <>
    <Router history={history}>
      <React.Suspense fallback={<Loading />}>
        <Switch>
          <Redirect exact path="/" to="Layout" />
          <Route path='/login' component={Login} />
          <Route path="/search/result/:id" component={SearchResult} />
          <Route path='/Search' component={Search} />
          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />
          <Route path='/Layout' component={Layout} />
          <Route path='/article/:id' component={Article} />
          <Route path='*' component={NotFound} />
        </Switch>
      </React.Suspense>
    </Router>
  </>
};
